<template>
    <div class="box">
      <!-- 顶部导航栏 -->
      <div class="header">
        <van-nav-bar
            title="用户"
            left-text="返回"
            @click-left="onClickLeft"
            @click-right="onClickRight"
            right-text="注销"
            left-arrow

        />
      </div>
  
      <!-- 用户卡片开始-->
      <div class="top"  @click="toLogin">
        <div class="userImg">
          <img src="../../assets/user.png" alt="">
        </div>
   
        <div class="username">
          <div>
            <p class="dl">{{ name1 }}</p>
          </div>
         
        </div>
      </div>
      <!-- 用户卡片结束 -->
  
      <!-- 我的订单 -->
      <div class="grid">
        <van-grid clickable :column-num="2">
            <van-grid-item text="">
                <span>0张</span><br>
                <span>卖座票</span>
            </van-grid-item>
            <van-grid-item text="">
                <span>￥0</span><br>
                <span>余额</span></van-grid-item>
            </van-grid>
      </div>
      <!-- 我的订单结束 -->
  
      <!-- 我的工具 -->
      <div class="cell">
        <van-cell-group inset>
          <van-cell icon="coupon-o" title="电影订单" is-link />
          <van-cell icon="balance-o" title="组合红包" is-link />
          <van-cell icon="service-o" title="帮助和客服" is-link />
          <van-cell icon="setting-o" title="设置" is-link />
        </van-cell-group>
      </div>
      <!-- 我的工具结束 -->
    </div>
  </template>
  
  <script>
  import Vue from 'vue';
  import { NavBar,Icon } from 'vant';
  import { Cell, CellGroup } from 'vant';
  import { Image as VanImage } from 'vant';
  import { Badge } from 'vant';
  import { getUser } from '@/request/request'
  import { removeCookie,getCookie } from '@/utils/cookie'
  import { Dialog } from 'vant';
  import { Grid, GridItem } from 'vant';

  Vue.use(Grid);
  Vue.use(GridItem);
  Vue.use(Badge);
  Vue.use(VanImage);
  Vue.use(Cell);
  Vue.use(CellGroup);
  Vue.use(Icon);
  Vue.use(NavBar);
  export default {
    async created() {
      this.name1 = '立即登录'
      if(getCookie('username')) {
        this.name1 = this.username =  getCookie('username')
        }
      
      // this.name1 = this.username != '' ? this.username : 
      // console.log(this.name1);
      // return
    },
    data () {
      return {
        name1:'',
        username:'',
        user:{},
        notice:false
      }
    },
    methods: {
      toLogin(){
        this.$router.push({
            path: '/login',
            query: {
                url: this.$route.path
            }
        })
      },
      onClickLeft() {
        this.$router.back()
      },
      onClickRight() {
        Dialog.confirm({
          title: '注销',
          message: '你确定要注销吗?',
        }).then(() => {
          removeCookie('username')
          this.$router.go()
      }).catch(() => {   
      }); 
      },
    },
    
  }
  </script>
  <style scoped>
  .van-grid{
    width: 100% !important;
  }
  .box{
    background: rgb(247, 247, 247);
    text-align: left;
    /* height: 100%; */
  }
  .dl{
    font-size: 35px;
    margin-top: 40px;
    
  }
  .top{
    height: 200px;
    background: rgb(255, 255, 255);
    /* border: 1px solid #ccc; */
    padding: 40px 20px;
    box-sizing: border-box;
    border-radius: 10px;
    margin: 10px;
    /* margin-top: 20px; */
    box-shadow: 0px 0px 15px #efefef;
  }
   .van-nav-bar__text{
    color: red;
  }
  .top .set{
    float: right;
    margin: 15px;
  }
  
  .userImg{
    float: left;
    margin: 15px 20px ;
  }
  .userImg img{
    width: 100px;
    height: 100px;
    border-radius: 35px;
  }
  .username{
    float: left;
    /* margin-left: 30px; */
  }
  .username h1{
    font-size: 30px;
    line-height: 25px;
  }
  .username h1 span{
    font-size: 30px;
  }
  .username p{
    color:rgb(134, 131, 131);
  }
  .grid{
    border-radius: 10px;
    margin: 10px;
    /* margin-top: 20px; */
    box-shadow: 0px 0px 15px #efefef;
  }
  .van-grid{
    width: 510px;
  }
  .grid-p ,.cell-p{
    margin-left: 15px;
    color: rgb(142, 142, 142);
    line-height: 15px;
    margin: 15px 10px 15px 10px;
  }
  .grid-p span,.cell-p span{
    color: rgb(255, 38, 0);
    font-weight: 1000;
    margin-right: 10px;
   
    line-height: 15px;
    
  }
  .cell{
    background: #fff;
    border-radius: 10px;
    margin: 10px;
    /* margin-top: 20px; */
    box-shadow: 0px 0px 15px #efefef;
  }
  </style>